<template>
	<view class="box">
		<view class="list">
			<view class="li">
				<image src="https://s1.ax1x.com/2022/11/27/zUNtSg.png" mode=""></image>
				<text>{{addData.mobile}}</text>
			</view>
			<view class="btm">
				<image src="https://s1.ax1x.com/2022/11/27/zUNGY8.png" mode=""></image>
				<input type="text" placeholder="输入验证码" maxlength="6" v-model="addData.code">
				<view class="get" @click="getcode" v-if="!disabled">
					{{time}}
				</view>
				<view class="get" @click="getcode" v-else>
					{{time}}
				</view>
			</view>
		</view>
		<view class="btu" @click="achieve">
			完成
		</view>
	</view>
</template>

<script>
	import {
		reqcode,
		updatatel
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				addData:{
					mobile:'',
					code:''
				},
				time: '获取验证码',
				currentTime: 10,
				disabled: true,
				interval: null,
			}
		},
		onLoad(potion) {
			console.log(potion);
			this.addData.mobile = potion.mobile
		},
		methods: {
			// 获取验证码
			async getcode() {
				if (this.addData.mobile == "") {
					uni.showToast({
						title: "请先填写手机号",
						icon: 'error'
					})
				} else {
					if (this.disabled === true) {
						this.interval = setInterval(() => {
							this.currentTime--
							this.time = this.currentTime + '秒'
							if (this.currentTime == 0) {
								clearInterval(this.interval)
								this.time = '重新发送',
									this.currentTime = 60
							}
						}, 1000)
					}
					let res = await reqcode({mobile: this.addData.mobile,})
					if(res.errCode==10000){
						uni.showToast({
							title:'发送成功',
							icon:'success'
						})
					}
					console.log(res);
				}
			},
			async achieve() {
				let res = await updatatel(this.addData)
				console.log(res);
				if(res.errCode==10000){
					uni.setStorageSync('userInfo',res.data)
					uni.showToast({
						title:'手机号修改成功',
						icon:'success'
					})
					uni.navigateTo({
						url:'../setting/setting'
					})
				}else{
					uni.showToast({
						title:res.errMsg
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.box {
		width: 100%;
		height: 100vh;
		background-color: #f6f5f5;
	}

	.list {
		width: 100%;
		height: 215rpx;
		background-color: #fff;
	}

	.li {
		width: 720rpx;
		height: 102rpx;
		border-bottom: 1rpx solid #efefef;
		margin-left: 15rpx;
		display: flex;
		align-items: center;

		image {
			width: 21rpx;
			height: 31rpx;
			margin-left: 12rpx;
			margin-right: 30rpx;
		}

		text {
			font-size: 24rpx;
			color: #666666;
		}
	}

	.btm {
		width: 720rpx;
		height: 102rpx;
		margin-left: 15rpx;
		display: flex;
		align-items: center;

		image {
			width: 28rpx;
			height: 32rpx;
			margin-left: 12rpx;
			margin-right: 30rpx;
		}

		input {
			font-size: 24rpx;
			color: #666666;
		}
	}

	.btu {
		width: 510rpx;
		height: 75rpx;
		background-color: #1f8fff;
		margin-top: 90rpx;
		margin-left: 120rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 75rpx;
		color: #fff;
	}
	.get {
		font-size: 24rpx;
		color: #2f6ab4;
		position: absolute;
		top: 145rpx;
		right: 80rpx;
	}
</style>
